import { IArticle } from "@/types/article"
import { Link } from "@tanstack/react-router"
import { Button } from "@/components/ui/button"
import classNames from "classnames"
import { FC } from 'react'
import { LazyLoadImage } from 'react-lazy-load-image-component'
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { useDelArticle } from "@/services/article"
import { message } from "antd"


export const ArticleItem: FC<{ className?: string, article: IArticle }> = ({ className, article }) => {
    return (
        <div className={classNames(className, 'hover:bg-muted duration-200 border rounded-sm mb-3 overflow-hidden flex items-center gap-3')}>
            <LazyLoadImage src={article.preview} alt="" className="w-12 h-12 object-cover" />
            <div className="flex justify-between flex-1 ">
                <Link to="/front/article/$id" params={{ id: article.id }} >
                    {article.title}
                </Link>
                <div className="flex gap-1">
                    <DelArticleButton article={article} />
                    <Link to={"/front/edit/$id"} params={{ id: article.id }}>
                        <Button variant="outline" className="mr-3" >编辑</Button>
                    </Link>
                </div>
            </div>
        </div >
    )
}


interface Props {
    article: IArticle
}

function DelArticleButton({ article }: Props) {
    const delMutation = useDelArticle()
    const delArticle = () => {
        delMutation.mutate(article.id, {
            onSuccess: () => {
                message.info({ content: '删除成功', key: 'info' })
            }
        })
    }
    return <AlertDialog>
        <AlertDialogTrigger asChild>
            <Button variant="outline" className="mr-3" disabled={!delMutation.isIdle}>delete</Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
            <AlertDialogHeader>
                <AlertDialogTitle>确定删除【{article.title}】吗?</AlertDialogTitle>
                <AlertDialogDescription>
                    文章删除后不能恢复
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <AlertDialogCancel>取消</AlertDialogCancel>
                <AlertDialogAction onClick={delArticle}>删除</AlertDialogAction>
            </AlertDialogFooter>
        </AlertDialogContent>
    </AlertDialog>
}
